<template>
    <div>
        <h1>显示查询</h1>
        <a href="Add">添加</a>
        食谱标题:<input type="text" v-model="paeg.foodTitle">
        食谱类型:<select v-model="paeg.typeName" >
                    <option value="">请选择</option>
                    <option v-for="m in xia" :value="m.typeName">{{m.typeName}}</option>
                </select>
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>食谱标题</td>
                    <td>食谱类型</td>
                    <td>食谱封面</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{m.foodId}}</td>
                    <td>{{m.foodTitle}}</td>
                    <td>{{m.typeName}}</td>
                    <td><img :src="'https://localhost:7211'+m.foodImg" alt="" style="width: 100px; height: 100px;"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import axios from 'axios';
//下拉框
onMounted(()=>{
    la();
})
const xia=ref([{
    "typeId": 0,
    "typeName": ""
}])
const la=()=>{
    axios.get("https://localhost:7211/api/FoodType/XiaLa",{params:xia.value}).then(res=>{
        xia.value=res.data;
    })
}
onMounted(()=>{
    Show();
})
const paeg=ref({
    foodTitle:'',
    typeName:''
})
const data=ref([{
    "foodId": 0,
    "foodTitle": "",
    "typeId": 0,
    "typeName":"",
    "foodImg": ""
}])
const Show=()=>{
    axios.get("https://localhost:7211/api/Food/GetAll",{params:paeg.value}).then(res=>{
        data.value=res.data;
    })
}
</script>

<style scoped>

</style>